<template>
    <div class="fullScreen">
        <m-header :msg="'投注详情'"></m-header>
        <div class="scroll-box he-fv tx-c-222">
            <div class="bg-c-wh type">{{ data.lotteryType }}</div>
            <div class="flex-box cont-box">
                <div class="tx-s-12 tx-c-666">
                    <div>投注期号：<span class="tx-s-14 tx-c-222">第{{ data.issue }}期</span></div>
                    <div>投注金额：<span class="tx-s-14 tx-c-222">{{ data.ticketPrice }}元</span></div>
                    <div>投注玩法：<span class="tx-s-14 tx-c-222">{{ data.playType }}</span></div>
                    <div>投注号码：<span class="tx-s-14 tx-c-222">{{ data.number }}</span></div>
                    <div>投注信息：<span class="tx-s-14 tx-c-222">{{ data.playInfo }}</span></div>
                    <div v-if="data.openCode">开奖号码：<span class="tx-s-14 tx-c-r word-b">{{ data.openCode }}</span></div>
                </div>
                <div class="status tx-s-20 tx-c-r" v-if="data.openState == '1'">+{{ data.totalPrize }}元</div>
                <div class="status icon" :class="icon[data.openState]" v-else></div>
            </div>
            <div class="tx-s-12 tx-c-666 mar-l">
                <div>投注时间：<span class="tx-s-14 tx-c-222">{{ data.createTime }}</span></div>
                <div>方案编号：<span class="tx-s-14 tx-c-222">{{ data.orderNo }}</span></div>
            </div>
            <div class="padd-1 mar-t-1">
                <div class="submit-btn" @click="toLottery(data.ename)">继续投注</div>
            </div>
        </div>
    </div>
</template>
<script type="text/ecmascript-6">
import 'common/css/user.css'
import MHeader from '../../components/m-header'
import { lotSelObj } from '../../common/js/data'
import { ticketsDetails } from '../../common/js/axiosUtil' 
export default {
    data () {
        return {
            data : '',
            icon : [
                'wkj', 'ycp', 'wzj', '', 'wcg'// 0=>'等开奖',1=>'中奖',2=>'未中奖',4=>'未成功'
            ]
        }
    },
    created () {
        this.getTicketsDetails()
    },
    methods: {
        getTicketsDetails () {
            this.$toast('加载中...', 1000000)
            let params = this.$params(1)
            params.append('ticketNo', this.$route.query.id)
            ticketsDetails(params)
            .then((response)=> {
                this.$toastClose()
                if(response.data.code == "200"){
                    this.data = response.data.data
                } else {
                    this.$logAgain(response.data.msg)
                }
            })
            .catch((error)=> {
                this.$toast('请求服务失败', 2000)
            })
        },
        // 跳转购彩页面
        toLottery (type) {
            // 清空上次购彩数据
            this.$store.state.lotData = null
            this.$store.state.lotType = type
            // this.$router.go(-2)
            this.$router.push('/' + lotSelObj[type])
        }
    },
    components: {
        MHeader
    }
}
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
@import "~common/stylus/variable" 
    .scroll-box
        position: fixed
        width: 100%
        top: 2.75rem
        bottom: 0
        overflow: auto
        background: $color-f0
    .scroll-box::-webkit-scrollbar
        display: none
    .type
        padding: 1rem
        background: white
    .cont-box
        margin: .75rem
        padding: .5rem
        background: white
        line-height: 2rem
    .status
        position : absolute
        top : 4.5rem
        right : 1.75rem
    .icon
        width: 5.125rem
        height: 2rem
        margin: .5rem .5rem 0 0
        background-repeat: no-repeat
        background-size: 100% 100%
    .wkj
        background-image: url('../../common/image/zj_tzxq_wkj.png')
    .wcg
        background-image: url('../../common/image/zj_tzxq_wcg.png')
    .wzj
        background-image: url('../../common/image/zj_tzxq_wzj.png')
    .ycp
        background-image: url('../../common/image/zj_tzxq_ycp.png')
    .mar-l
        margin-left: 1.25rem
        line-height: 1.25rem
    .word-b
        word-break : break-all
</style>

